<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .beijing {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: gray;
        opacity: 0.7;
    }

    .kuangjia {
        display: none;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 500px;
        height: 200px;
        background-color: #ffffff;
    }

    .title {
        position: absolute;
        width: 100%;
        height: 10%;
        background-color: blue;
    }

    #guanbi {
        position: absolute;
        right: 0;
        top: 0;
        background-color: red;
    }

    .denglu {
        position: absolute;
        top: 10%;
        width: 100%;
        height: 90%;
        background-color: green;
    }
</style>

<body>
    <button>点击注册</button>
    <div class="beijing">
        <div class="kuangjia">
            <div class="title">拖动标题区域可以移动</div>
            <button id="guanbi">关闭</button>
            <div class="denglu">登陆区域</div>
        </div>
    </div>
    <script>
        var btn = document.querySelector('button');
        var kuangjia = document.querySelector('.kuangjia');
        var beijing = document.querySelector('.beijing');
        var title = document.querySelector('.title');
        var guanbi = document.querySelector('#guanbi');
        btn.addEventListener('click', function () {
            beijing.style.display = 'block';
            kuangjia.style.display = 'block';
        })
        guanbi.addEventListener('click', function () {
            beijing.style.display = 'none';
            kuangjia.style.display = 'none';
        })
        title.addEventListener('mousedown', function (e) {
            var x = e.pageX - kuangjia.offsetLeft;
            var y = e.pageY - kuangjia.offsetTop;
            document.addEventListener('mousemove', move);
            function move(e) {
                kuangjia.style.left = e.pageX - x + 'px';
                kuangjia.style.top = e.pageY - y + 'px';
            }
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move);
            })
        })
    </script>
</body>


</html>